<template>
  <div>
    <div class="gva-search-box">
      <el-form
        ref="elSearchFormRef"
        :inline="true"
        :model="searchInfo"
        class="demo-form-inline"
        :rules="searchRule"
        @keyup.enter="onSubmit"
      >
        <el-form-item
          label="创建日期"
          prop="createdAt"
        >
          <template #label>
            <span>
              创建日期
              <el-tooltip content="搜索范围是开始日期（包含）至结束日期（不包含）">
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
            </span>
          </template>
          <el-date-picker
            v-model="searchInfo.startCreatedAt"
            type="datetime"
            placeholder="开始日期"
            :disabled-date="time=> searchInfo.endCreatedAt ? time.getTime() > searchInfo.endCreatedAt.getTime() : false"
          />
          —
          <el-date-picker
            v-model="searchInfo.endCreatedAt"
            type="datetime"
            placeholder="结束日期"
            :disabled-date="time=> searchInfo.startCreatedAt ? time.getTime() < searchInfo.startCreatedAt.getTime() : false"
          />
        </el-form-item>
        <el-form-item label="手机号/账号">
          <el-input
            v-model="searchInfo.phone"
            placeholder="手机号/账号"
            clearable
          />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input
            v-model="searchInfo.name"
            placeholder="姓名"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="search"
            @click="onSubmit"
          >查询</el-button>
          <el-button
            icon="refresh"
            @click="onReset"
          >重置</el-button>
          <el-button
            icon="download"
            @click="onExport"
          >导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
      <el-table
        ref="multipleTable"
        style="width: 100%"
        tooltip-effect="dark"
        :data="tableData"
        row-key="hmId"
      >
        <el-table-column
          align="left"
          label="头像"
          prop="headerImg"
          width="120"
        >
          <template #default="scope">
            <el-image :src="getUrl(scope.row.headerImg)" />
          </template>
        </el-table-column>
        <!--                  <el-table-column align="left" label="服务中心" prop="storeId" width="120">-->
        <!--                    <template #default="scope">{{ serviceList.filter(item => item.ID === scope.row.storeId)[0]?.name }}</template>-->
        <!--                  </el-table-column>-->
        <el-table-column
          align="left"
          label="名称"
          prop="name"
          width="220"
        />
        <el-table-column
          align="left"
          label="手机号/账号"
          prop="phone"
          width="120"
        />
        <el-table-column
          align="left"
          label="学号"
          prop="studentID"
          width="150"
        />
        <el-table-column
          align="left"
          label="注册状态"
          prop="directNum"
          width="120"
        >
          <template #default="scope">
            <el-tag
              v-if="scope.row.isRegister"
              type="success"
            >
              已注册
            </el-tag>
            <el-tag v-else>处理中</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="left"
          label="认证状态"
          prop="indirectNum"
          width="120"
        >
          <template #default="scope">
            <el-tag
              v-if="scope.row.isAudit"
              type="success"
            >
              已认证
            </el-tag>
            <el-tag v-else>未认证</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="left"
          label="直推"
          prop="directNum"
          width="80"
        />
        <el-table-column
          align="left"
          label="间推"
          prop="indirectNum"
          width="80"
        />
        <el-table-column
          align="left"
          label="等级"
          prop="level"
          width="120"
        >
          <template #default="{row}">
            <el-tag>{{ levelOption.filter(item=>item.value===row.level)[0].label }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="left"
          label="评分"
          prop="score"
          width="120"
        />
        <el-table-column
          align="left"
          label="认证时间"
          width="180"
        >
          <template #default="scope">{{ scope.row.isRegister&&scope.row.isAudit?formatDateYmd(scope.row.CreatedAt):"暂未通过认证" }}</template>
        </el-table-column>
        <el-table-column
          align="left"
          label="操作"
        >
          <template #default="scope">
            <el-button
              type="primary"
              link
              icon="edit"
              class="table-button"
              @click="showCard(scope.row)"
            >邀请卡</el-button>
            <el-button
              type="primary"
              link
              icon="edit"
              class="table-button"
              @click="openUserList(scope.row.hmId)"
            >推广名单</el-button>
            <el-button
              type="primary"
              link
              icon="edit"
              class="table-button"
              @click="updateFdHealthManagerFunc(scope.row)"
            >编辑</el-button>
            <el-button
              type="primary"
              link
              icon="edit"
              class="table-button"
              @click="targetPlan(scope.row.hmId)"
            >目标计划</el-button>
            <el-button
              type="primary"
              link
              icon="edit"
              class="table-button"
              @click="relevancy(scope.row)"
            >文章权限</el-button>
          <!--<el-button type="primary" link icon="edit" class="table-button" @click="grantStudentID(scope.row)" >录入学号</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="page"
          :page-size="pageSize"
          :page-sizes="[10, 30, 50, 100]"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
    <el-dialog
      v-model="dialogFormVisible"
      :before-close="closeDialog"
      :title="'修改'"
      destroy-on-close
    >
      <el-scrollbar height="500px">
        <el-form
          ref="elFormRef"
          :model="formData"
          label-position="right"
          :rules="rule"
          label-width="120px"
        >
          <el-form-item
            label="等级:"
            prop="level"
          >
            <el-select
              v-model="formData.level"
              :clearable="true"
              placeholder="等级"
            >
              <el-option
                v-for="item in levelOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="评分:"
            prop="score"
          >
            <el-input-number v-model="formData.score" />
          </el-form-item>
        </el-form>
      </el-scrollbar>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button
            type="primary"
            @click="enterDialog"
          >确 定</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="targetPlanFlag"
      destroy-on-close
      title="目标计划"
    >
      <el-form>
        <el-form-item label="公益服务人数">
          <el-input v-model.number="targetPlanInfo.proBonoNum" />
        </el-form-item>
        <el-form-item label="公益服务时间">
          <el-date-picker
            v-model="targetPlanInfo.proBonoTime"
            type="datetime"
            placeholder="公益服务时间"
          />
        </el-form-item>
        <el-form-item label="新增会员人数">
          <el-input v-model.number="targetPlanInfo.incrVipNum" />
        </el-form-item>
        <el-form-item label="新增会员时间">
          <el-date-picker
            v-model="targetPlanInfo.incrVipTime"
            type="datetime"
            placeholder="新增会员时间"
          />
        </el-form-item>
        <el-form-item label="服务会员人数">
          <el-input v-model.number="targetPlanInfo.serviceVipNum" />
        </el-form-item>
        <el-form-item label="服务会员时间">
          <el-date-picker
            v-model="targetPlanInfo.serviceVipTime"
            type="datetime"
            placeholder="服务会员时间"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="targetPlanFlag=false">取消</el-button>
        <el-button
          type="primary"
          @click="changeTargetPlan"
        >保存</el-button>
      </template>
    </el-dialog>

    <el-dialog
      v-model="grantStudentIDFlag"
      destroy-on-close
      title="录入学号"
    >
      <el-form>
        <el-form-item label="学号">
          <el-input v-model="grantStudentIDInfo.studentID" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="grantStudentIDFlag=false">取消</el-button>
        <el-button
          type="primary"
          @click="changeGrantStudentID"
        >保存</el-button>
      </template>
    </el-dialog>

    <el-dialog
      v-model="userListFlag"
      title="推广名单"
    >
      <el-table :data="userListData">
        <el-table-column
          align="left"
          label="注册日期"
          width="180"
        >
          <template #default="scope">{{ formatDateYmd(scope.row.createdAt) }}</template>
        </el-table-column>
        <el-table-column
          align="left"
          label="用户手机号"
          prop="phone"
          min-width="120"
        />
        <el-table-column
          align="left"
          label="名称"
          prop="name"
          width="120"
        />
        <el-table-column
          align="left"
          label="性别"
          width="180"
        >
          <template #default="{row}">
            {{ row.sex == '1'?'男':'女' }}
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-button
          type="primary"
          @click="userListFlag = false"
        >确 定</el-button>
      </template>
    </el-dialog>
    <el-dialog
      v-model="cardFlag"
      title="邀请卡"
      width="400px"
    >
      <el-card>
        <div class="relative bg-[url('https://image.cushdylm.com/app/jgs/%E9%82%80%E8%AF%B7%E5%8D%A1.png')] bg-no-repeat w-96 h-52">
          <div class="absolute left-20 top-6">{{ inviteName }}</div>
          <!--          <div class="absolute left-4 bottom-4">{{inviteNum}}</div>-->
          <div class="bg-[url('https://image.cushdylm.com/app/icon/U_icon.png')] bg-no-repeat bg-cover w-14 h-14 absolute left-2 top-2" />
          <qrcode-vue
            class="absolute top-24 right-10"
            :value="inviteHref"
            :size="80"
            level="H"
          />
        </div>
      </el-card>
    </el-dialog>

    <el-drawer
      v-model="drawer"
      direction="rtl"
    >
      <template #header>
        <div>
          <h4>学习文章</h4>
          <el-input
            v-model="filterText"
            placeholder="请输入搜索内容"
            clearable
          />
          <div class="flex gap-2 mt-2">
            <el-select
              v-model="levelOne"
              placeholder="请选择一级标题"
              clearable
            >
              <el-option
                v-for="item in levelOneOptions"
                :key="item.ID"
                :label="item.value"
                :value="item.ID"
              />
            </el-select>
            <el-select
              v-model="levelTwo"
              placeholder="请选择二级标题"
              clearable
            >
              <el-option
                v-for="item in levelTwoOptions.filter(item=>levelOne?item.levelOneID === levelOne:true)"
                :key="item.ID"
                :label="item.value"
                :value="item.ID"
              />
            </el-select>
            <el-select
              v-model="levelThree"
              placeholder="请选择三级标题"
              clearable
            >
              <el-option
                v-for="item in levelThreeOptions.filter(item=>levelTwo?item.levelTwoID === levelTwo:true)"
                :key="item.ID"
                :label="item.value"
                :value="item.ID"
              />
            </el-select>
          </div>
        </div>

      </template>
      <template #default>
        <div>
          <el-tabs>
            <el-tab-pane
              label="付费文章"
            >
              <el-tree
                ref="treeRefArticle"
                node-key="ID"
                :data="learns"
                :filter-node-method="filterTree"
                :props="{
                  label: 'title',
                }"
                show-checkbox
              />
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">取消</el-button>
          <el-button
            type="primary"
            @click="confirmClick"
          >确定</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import {
  createFdHealthManager,
  updateFdHealthManager,
  findFdHealthManager,
  getAllHealthManagerList
} from '@/api/fdHealthManager'

import { getTargetPlan, saveTargetPlan } from '@/api/targetPlan'

// 全量引入格式化工具 请按需保留
import {
  getDictFunc,
  formatDate,
  formatBoolean,
  filterDict,
  ReturnArrImg,
  onDownloadFile,
  formatDateYmd,
} from '@/utils/format'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive, watch } from 'vue'
import { getServiceCenterList } from '@/api/serviceCenter'
import SelectImage from '@/components/selectImage/selectImage.vue'
import { getUrl } from '@/utils/image'
import { getAllUserList } from '@/api/fdUser'
import QrcodeVue from 'qrcode.vue'
import { getBuyArticle, getFdArticleLearnList, setBuyArticle } from '@/api/fdArticleLearn'
import { getFdArticleGraphicList } from '@/api/fdArticleGraphic'
import { getFdArticleAudioList } from '@/api/fdArticleAudio'
import { getFdArticleVideoList } from '@/api/fdArticleVideo'
import { getLearnLevelOneList, getLevelOneList } from '@/api/levelOne'
import { getLevelTwoList } from '@/api/levelTwo'
import { getLevelThreeList } from '@/api/levelThree'

defineOptions({
  name: 'FdHealthManager'
})

const cardFlag = ref(false)
const inviteHref = ref('')
const inviteName = ref('')
// const inviteNum = ref('')
const showCard = (row) => {
  cardFlag.value = true
  inviteHref.value = `https://fudun.cushdylm.com/#/pages/index/login?steward_id=${row.hmId}`
  inviteName.value = row.name
  // inviteNum.value = row.certificate
}

const userListData = ref([])

const userListFlag = ref(false)

const openUserList = async(id) => {
  const res = await getAllUserList({ page: 1, pageSize: 9999, stewardID: id })
  if (res.code === 0) {
    userListData.value = res.data.list
    userListFlag.value = true
  }
}

const targetPlanFlag = ref(false)
const targetPlanInfo = ref({})
const targetPlan = async(hm_id) => {
  const res = await getTargetPlan({ hm_id })
  targetPlanFlag.value = true
  targetPlanInfo.value = res.data
}

const changeTargetPlan = async() => {
  const res = await saveTargetPlan(targetPlanInfo.value)
  if (res.code === 0) {
    ElMessage.success('修改成功')
  }
  targetPlanFlag.value = false
}

const grantStudentIDFlag = ref(false)
const grantStudentIDInfo = ref({})
const grantStudentID = async(row) => {
  const res = await findFdHealthManager({ hmId: row.hmId })
  grantStudentIDFlag.value = true
  grantStudentIDInfo.value = res.data.refdHealthManager
}

const changeGrantStudentID = async(row) => {
  const res = await updateFdHealthManager(grantStudentIDInfo.value)
  if (res.code === 0) {
    ElMessage.success('修改成功')
    getTableData()
  }
  grantStudentIDFlag.value = false
}

const levelOption = ref([
  { label: '初级', value: 0 },
  { label: '中级', value: 1 },
  { label: '高级', value: 2 },
])

const onExport = () => {
  const queryInfo = {
    ...searchInfo.value,
  }
  if (!queryInfo.startCreatedAt) {
    delete queryInfo.startCreatedAt
  }
  if (!queryInfo.endCreatedAt) {
    delete queryInfo.endCreatedAt
  }

  const params = Object.keys(queryInfo).map(key => `${key}=${queryInfo[key]}`).join('&')
  const url = import.meta.env.VITE_BASE_API + '/fdHealthManager/exportExcel?' + params
  window.open(url, '_blank')
}

const serviceList = ref([])
const getServiceList = async() => {
  const res = await getServiceCenterList()
  if (res.code === 0) {
    serviceList.value = res.data
  }
}
getServiceList()
// 自动化生成的字典（可能为空）以及字段
const formData = ref({
  hmId: 0,
  storeId: undefined,
  phone: '',
  password: '',
  name: '',
  sex: 1,
  headerImg: '',
  directNum: 0,
  indirectNum: 0,
})

// 验证规则
const rule = reactive({
})

const searchRule = reactive({
  createdAt: [
    { validator: (rule, value, callback) => {
      if (searchInfo.value.startCreatedAt && !searchInfo.value.endCreatedAt) {
        callback(new Error('请填写结束日期'))
      } else if (!searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt) {
        callback(new Error('请填写开始日期'))
      } else if (searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt && (searchInfo.value.startCreatedAt.getTime() === searchInfo.value.endCreatedAt.getTime() || searchInfo.value.startCreatedAt.getTime() > searchInfo.value.endCreatedAt.getTime())) {
        callback(new Error('开始日期应当早于结束日期'))
      } else {
        callback()
      }
    }, trigger: 'change' }
  ],
})

const elFormRef = ref()
const elSearchFormRef = ref()

// =========== 表格控制部分 ===========
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref([])
const searchInfo = ref({})

// 重置
const onReset = () => {
  searchInfo.value = {}
  getTableData()
}

// 搜索
const onSubmit = () => {
  elSearchFormRef.value?.validate(async(valid) => {
    if (!valid) return
    page.value = 1
    pageSize.value = 10
    getTableData()
  })
}

// 分页
const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}

// 修改页面容量
const handleCurrentChange = (val) => {
  page.value = val
  getTableData()
}

// 查询
const getTableData = async() => {
  const table = await getAllHealthManagerList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
  if (table.code === 0) {
    tableData.value = table.data.list
    total.value = table.data.total
    page.value = table.data.page
    pageSize.value = table.data.pageSize
  }
}

getTableData()

// ============== 表格控制部分结束 ===============

// 获取需要的字典 可能为空 按需保留
const setOptions = async() => {
}

// 获取需要的字典 可能为空 按需保留
setOptions()

// 行为控制标记（弹窗内部需要增还是改）
const type = ref('')

// 更新行
const updateFdHealthManagerFunc = async(row) => {
  const res = await findFdHealthManager({ hmId: row.hmId })
  type.value = 'update'
  if (res.code === 0) {
    formData.value = res.data.refdHealthManager
    dialogFormVisible.value = true
  }
}

// 弹窗控制标记
const dialogFormVisible = ref(false)

// 打开弹窗
const openDialog = () => {
  type.value = 'create'
  dialogFormVisible.value = true
}

// 关闭弹窗
const closeDialog = () => {
  dialogFormVisible.value = false
  formData.value = {
    hmId: 0,
    storeId: undefined,
    phone: '',
    password: '',
    name: '',
    sex: 1,
    headerImg: '',
    directNum: 0,
    indirectNum: 0,
  }
}

const treeRefArticle = ref(null)
const filterText = ref('')
const active = ref({})
const drawer = ref(false)
const learns = ref([])

const filterTree = (_, tree) => {
  let flag = true
  if (filterText.value) {
    flag = tree.title.includes(filterText.value)
  }
  if (levelOne.value) {
    flag = tree.levelOneID === levelOne.value
  }
  if (levelTwo.value) {
    flag = tree.levelTwoID === levelTwo.value
  }
  if (levelThree.value) {
    flag = tree.levelThreeID === levelThree.value
  }
  return flag
}

const getLearnArticle = async() => {
  const res = await getFdArticleLearnList({ isPaid: 1, status: 1 })
  if (res.code === 0) {
    learns.value = res.data.list
  }
}

getLearnArticle()

const relevancy = async(row) => {
  active.value = row
  drawer.value = true
  const res = await getBuyArticle({ hm_id: row.hmId })
  if (res.code === 0) {
    const articleIds = []
    res.data?.forEach(item => {
      articleIds.push(item.article_id)
    })
    treeRefArticle.value.setCheckedKeys(articleIds)
  }
}

const confirmClick = async() => {
  const articleIds = treeRefArticle.value.getCheckedKeys()
  const res = await setBuyArticle({
    hm_id: active.value.hmId,
    article_id: articleIds,
  })
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '关联成功'
    })
    drawer.value = false
  }
}

const cancelClick = () => {}

const levelOne = ref()
const levelTwo = ref()
const levelThree = ref()

const levelOneOptions = ref([])
const levelTwoOptions = ref([])
const levelThreeOptions = ref([])

const getLevelOptions = async() => {
  const res1 = await getLearnLevelOneList()
  if (res1.code === 0) {
    levelOneOptions.value = res1.data.list
  }
  const res2 = await getLevelTwoList()
  if (res2.code === 0) {
    levelTwoOptions.value = res2.data.list
  }
  const res3 = await getLevelThreeList()
  if (res3.code === 0) {
    levelThreeOptions.value = res3.data.list
  }
}

getLevelOptions()

// 弹窗确定
const enterDialog = async() => {
  elFormRef.value?.validate(async(valid) => {
    if (!valid) return
    let res
    switch (type.value) {
      case 'create':
        res = await createFdHealthManager(formData.value)
        break
      case 'update':
        res = await updateFdHealthManager(formData.value)
        break
      default:
        res = await createFdHealthManager(formData.value)
        break
    }
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: '创建/更改成功'
      })
      closeDialog()
      getTableData()
    }
  })
}

watch(() => [filterText.value, levelOne.value, levelTwo.value, levelThree.value], () => {
  treeRefArticle.value?.filter()
})

</script>

<style>

</style>
